<template>
  <d2-container>
    <split-pane :min-percent="10" :max-percent="20" :default-percent="20" split="vertical">
      <template slot="paneL">
        <my-area-tree @change="onAreaChange" />
      </template>
      <template slot="paneR">
        <d2-crud
          ref="d2Crud"
          :columns="columns"
          :data="data"
          :loading="loading"
          :pagination="pagination"
          @pagination-current-change="onPageChange"
        ></d2-crud>
      </template>
    </split-pane>
  </d2-container>
</template>

<script>
import MyAreaTree from "@/components/my-area-tree";

export default {
  name: "reportedData",
  components: { MyAreaTree },
  data() {
    return {
      loading: false,
      pagination: {
        currentPage: 1,
        pageSize: 100,
        total: 0
      },
      areaId: "1",
      columns: [
        {
          title: "序号",
          key: "serialNum",
          width: "50px"
        },
        {
          title: "发送",
          key: "sendDesc"
        },
        {
          title: "执行进度",
          key: "progress"
        },
        {
          title: "指令发送",
          key: "send"
        },
        {
          title: "发送时间",
          key: "pnSendTime"
        },
        {
          title: "提交次数",
          key: "doCount"
        },
        {
          title: "操作人",
          key: "username"
        },
        {
          title: "指令接收",
          key: "receive"
        },
        {
          title: "接收时间",
          key: "pnReceiveTime"
        }
      ],
      data: []
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    onAreaChange(data, node) {
      this.areaId = data.id;
      this.fetchData();
    },
    fetchData() {
      this.loading = true;
      this.$api
        .admin_allDataCall_allDataCall({
          pageNum: this.pagination.currentPage,
          pageSize: this.pagination.pageSize,
          areaId: this.areaId
        })
        .then(res => {
          this.data = res.data;
          this.pagination.total = res.total;
        })
        .catch(err => {
          console.log("err", err);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    onPageChange(currentPage) {
      this.pagination.currentPage = currentPage;
      this.fetchData();
    }
  }
};
</script>
